<template>
<drawer :display.sync="isShow" width="60%" :withHeader="false">
    <div class="title">
        <div>{{titleName}}</div>
        <div class="collapseItemOption"></div>
    </div>
    <el-form  label-position="top" label-width="100px" inline :model="formDetail" class="agreementDetails" ref="formDetail">
        <el-row v-if="titleName == '用户详情'">
            <el-col :span="6">
                <el-form-item label="用户ID" >
                    <el-input size="mini" readonly v-model="formDetail.userId" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="用户账号" >
                    <el-input size="mini" readonly v-model="formDetail.accNo" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="用户姓名" >
                    <el-input size="mini" readonly v-model="formDetail.userName" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="用户类型" >
                    <el-input size="mini" readonly v-model="formDetail.userType" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所属部门" >
                    <el-input size="mini" readonly v-model="formDetail.deptCode" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所属部门名称" >
                    <el-input size="mini" readonly v-model="formDetail.deptName" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所属岗位" >
                    <el-input size="mini" readonly v-model="formDetail.deptPost" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="是否项目组" >
                    <el-input size="mini" readonly v-model="formDetail.isProject" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="证件Id" >
                    <el-input size="mini" readonly v-model="formDetail.card" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="证件类型" >
                    <el-input size="mini" readonly v-model="formDetail.cardType" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所属公司Id" >
                    <el-input size="mini" readonly v-model="formDetail.companyId" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所属公司编码" >
                    <el-input size="mini" readonly v-model="formDetail.companyCode" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="二级公司编码" >
                    <el-input size="mini" readonly v-model="formDetail.groupCompanyCode" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所属公司名称" >
                    <el-input size="mini" readonly v-model="formDetail.companyName" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="二级公司名称" >
                    <el-input size="mini" readonly v-model="formDetail.groupCompanyName" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="公司类型" >
                    <el-input size="mini" readonly v-model="formDetail.companyType" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="登录IP" >
                    <el-input size="mini" readonly v-model="formDetail.loginIp" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="最后登录IP" >
                    <el-input size="mini" readonly v-model="formDetail.lastLoginIp" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="登录时间" >
                    <el-input size="mini" readonly v-model="formDetail.loginTime" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="最后登录时间" >
                    <el-input size="mini" readonly v-model="formDetail.lastLoginTime" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客户公司id" >
                    <el-input size="mini" readonly v-model="formDetail.customerCompanyId" />
                </el-form-item>
            </el-col>
        </el-row>
         <el-row v-else>
            <el-col :span="24">
                <el-form-item label="权限详情信息" >
                    <el-input type="textarea" readonly v-model="UserRightsData" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</drawer>
</template>

<script>
import drawer from '@/components/BaseTable/drawer'
export default {
    components: {
        drawer,
    },
    props: {
        formDetail:{
            type:Object
        },
        editOrderShow:{
            type:Boolean
        },
        editOrderFun:{
            type:Function
        },
        titleName:{
            type:String
        },
        UserRightsData:{
            type:Array
        },
    },
    watch: {
      editOrderShow(newval){
          newval == true ? this.isShow = true : this.isShow = false
      },
      isShow(newval){
           newval == false ? this.editOrderFun() : ''
      }
    },
    data() {
        return {
            isShow:false,
        }
    },
    created() {
    },
    computed: {

    },
    methods: {
    },
}
</script>
<style lang="less" scoped>
    .agreementDetails{
        .el-textarea__inner{
            height: 700px !important;
        }
    }
</style>
<style lang="less" scoped>
@import './../../../../assets/searchfrom';

.collapseItemOption {
    margin-right: 20px;
    margin-left: auto;
}
.title{
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 16px;
}

/deep/ .demo-drawer__content .el-collapse-item__content {
    padding-bottom: 10px;
    background: #f5f7fa;
}

.drawer /deep/ .drawer-body {
    height: calc(100% - 100px);
}

.txt {
    margin-left: 20px;
}

.agreementDetails {
    .el-form-item {
        width: 100%;
        margin-right: 0;
        padding-right: 35px;
        box-sizing: border-box;
    }

    /deep/ .el-select {
        width: 100%;
    }

    /deep/ .el-input-number {
        width: 100%;
    }

    /deep/ .el-input {
        width: 100%;

        .el-input__inner {
            width: 100%;
        }
    }
 
}
</style>
